<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Favicon -->
  <link rel="icon" href="./assets/favicon.png">

  <!-- https://remixicon.com/ -->
  <link href="https://cdn.jsdelivr.net/npm/remixicon@3.2.0/fonts/remixicon.css" rel="stylesheet">

  <link rel="stylesheet" href="./assets/css/style.css">
  <link rel="stylesheet" href="./assets/css/respond.css">

  <title>Responsive Travel Website</title>
</head>
<body>
  <!-- HEADER -->
  <header class="header" id="header">
    <nav class="nav container">
      <a href="javascript:;" class="nav_logo">
        ONESEASON
      </a>

      <div class="nav_menu" id="nav_menu">
        <ul class="nav_list">
          <li class="nav_li">
            <a href="#home" class="nav_link active_link">
              Home
            </a>
          </li>

          <li class="nav_li">
            <a href="#about" class="nav_link">
              About
            </a>
          </li>

          <li class="nav_li">
            <a href="#popular" class="nav_link">
              Popular
            </a>
          </li>

          <li class="nav_li">
            <a href="#explore" class="nav_link">
              Explore
            </a>
          </li>
        </ul>

        <!-- close button -->
        <div class="nav_close" id="nav_close">
          <i class="ri-close-line"></i>
        </div>
      </div>

      <!-- toggle button -->
      <div class="nav_toggle" id="nav_toggle">
        <i class="ri-menu-3-fill"></i>
      </div>
    </nav>
  </header>

  <!-- MAIN -->
  <main class="main">
    <!-- HOME -->
    <section class="section home" id="home">
      <img src="./assets/images/home-bg.jpg" alt="home image" class="home_bg">

      <div class="home_shadow"></div>

      <div class="home_container container grid">
        <div class="home_caption">
          <h3 class="home_subtitle">
            Welcome To OneSeason
          </h3>
  
          <h1 class="home_title">
            Explore <br>
            The World
          </h1>
  
          <p class="home_describe">
            Live the trips exploring the world, discover paradises, islands, mountains and much more, get your trip now.
          </p>
  
          <a href="javascript:;" class="button">
            Start Your Journey 
            <i class="ri-arrow-right-line"></i>
          </a>
        </div>

        <div class="home_cards grid">
          <article class="home_card">
            <img 
              src="./assets/images/home-trees.jpg" 
              alt="home-trees"
              class="home_card_img"
            >
  
            <h3 class="home_card_title">
              Croatia
            </h3>
  
            <div class="home_card_shadow"></div>
          </article>
  
          <article class="home_card">
            <img 
              src="./assets/images/home-lake.jpg" 
              alt="home-trees"
              class="home_card_img"
            >
  
            <h3 class="home_card_title">
              Iceland
            </h3>
  
            <div class="home_card_shadow"></div>
          </article>
  
          <article class="home_card">
            <img 
              src="./assets/images/home-mountain.jpg" 
              alt="home-trees"
              class="home_card_img"
            >
  
            <h3 class="home_card_title">
              Italy
            </h3>
  
            <div class="home_card_shadow"></div>
          </article>
  
          <article class="home_card">
            <img 
              src="./assets/images/home-beach.jpg" 
              alt="home-trees"
              class="home_card_img"
            >
  
            <h3 class="home_card_title">
              Spain
            </h3>
  
            <div class="home_card_shadow"></div>
          </article>
        </div>
      </div>
    </section>

    <!-- ABOUT -->
    <section class="section about" id="about">
      <div class="about_container container grid">
        <div class="about_caption">
          <h2 class="section_title">
            Learn More <br>
            About Travel
          </h2>

          <p class="caption_describe">
            All the trips around the world are a great 
            pleasure and happiness for anyone, enjoy 
            the sights when you travel the world. Travel 
            safely and without worries, get your trip and 
            explore the paradises of the world.
          </p>

          <a href="javascript:;" class="button">
            Explore Travel
            <i class="ri-arrow-right-line"></i>
          </a>
        </div>

        <div class="about_image">
          <img src="./assets/images/about-beach.jpg" alt="about_image">
          <div class="about_shadow"></div>
        </div>
      </div>
    </section>

    <!-- POPULAR -->
    <section class="section popular" id="popular">
      <h2 class="section_title">
        Enjoy The Beauty <br>
        Of The World
      </h2>

      <div class="popular_container container grid">
        <article class="pop_card">
          <div class="card_image">
            <img 
              src="./assets/images/popular-mountain.jpg"  alt="pop-mountain"
            >
            <div class="img_shadow"></div>
          </div>

          <h2 class="pop_title">
            Logan Mountain
          </h2>

          <div class="pop_location">
            <i class="ri-map-pin-line"></i>
            <span>Canadá</span>
          </div>
        </article>

        <article class="pop_card">
          <div class="card_image">
            <img 
              src="./assets/images/popular-forest.jpg"  alt="pop-mountain"
            >
            <div class="img_shadow"></div>
          </div>

          <h2 class="pop_title">
            Spike Forest
          </h2>

          <div class="pop_location">
            <i class="ri-map-pin-line"></i>
            <span>Irland</span>
          </div>
        </article>

        <article class="pop_card">
          <div class="card_image">
            <img 
              src="./assets/images/popular-lake.jpg"  alt="pop-mountain"
            >
            <div class="img_shadow"></div>
          </div>

          <h2 class="pop_title">
            Garda Lake
          </h2>

          <div class="pop_location">
            <i class="ri-map-pin-line"></i>
            <span>Italy</span>
          </div>
        </article>
      </div>
    </section>
    
    <!-- EXPLORE -->
    <section class="section explore" id="explore">
      <div class="explore_container">
        <div class="explore_image">
          <img src="./assets/images/explore-beach.jpg" alt="explore-beach">
          <div class="explore_shadow"></div>
        </div>

        <div class="explore_content container grid">
          <div class="explore_caption">
            <h2 class="section_title">
              Explore The <br> 
              Best Paradises
            </h2>

            <p class="explore_description">
              Exploring paradises such as islands and 
              valleys when traveling the world is one of 
              the greatest experiences when you travel, it 
              offers you harmony and peace and you 
              can enjoy it with great comfort.
            </p>
          </div>

          <div class="explore_user">
            <img src="./assets/images/explore-perfil.png" alt="explore-perfil">
            <span class="name">
              Paul Jeams
            </span>
          </div>
        </div>
      </div>
    </section>
    
    <!-- JOIN -->
    <section class="section join">
      <div class="join_container container grid">
        <div class="join_caption">
          <h2 class="section_title">
            Your Journey <br>
            Starts Here
          </h2>

          <p class="join_describe">
            Get up to date with the latest travel and information from us.
          </p>

          <form action="" class="join_form">
            <input type="email" class="email" placeholder="Enter your email">

            <button class="submit_btn button">
              Subscribe Our Newsletter
              <i class="ri-arrow-right-line"></i>
            </button>
          </form>
        </div>

        <div class="join_image">
          <img src="./assets/images/join-island.jpg" alt="join-island">
          <div class="img_shadow"></div>
        </div>
      </div>
    </section>
  </main>

  <!-- FOOTER -->
  <footer class="footer">
    <div class="footer_container container grid">
      <div class="foot_content grid">
        <div>
          <a href="javascript:;" class="foot_logo">
            ONESEASON
          </a>

          <p class="foot_describe">
            Travel with us and explore <br> 
            the world without limits.
          </p>
        </div>

        <div class="foot_datas grid">
          <div>
            <h3 class="data_title">
              About
            </h3>

            <ul class="data_links">
              <li>
                <a href="javascript:;" class="link">
                  About Us
                </a>
              </li>
              <li>
                <a href="javascript:;" class="link">
                  Features
                </a>
              </li>
              <li>
                <a href="javascript:;" class="link">
                  News & Blog
                </a>
              </li>
            </ul>
          </div>

          <div>
            <h3 class="data_title">
              Company
            </h3>

            <ul class="data_links">
              <li>
                <a href="javascript:;" class="link">
                  FAQs
                </a>
              </li>
              <li>
                <a href="javascript:;" class="link">
                  History
                </a>
              </li>
              <li>
                <a href="javascript:;" class="link">
                  Testimonials
                </a>
              </li>
            </ul>
          </div>

          <div>
            <h3 class="data_title">
              Contact
            </h3>

            <ul class="data_links">
              <li>
                <a href="javascript:;" class="link">
                  Call Center
                </a>
              </li>
              <li>
                <a href="javascript:;" class="link">
                  Support Center
                </a>
              </li>
              <li>
                <a href="javascript:;" class="link">
                  Contact Us
                </a>
              </li>
            </ul>
          </div>

          <div>
            <h3 class="data_title">
              Support
            </h3>

            <ul class="data_links">
              <li>
                <a href="javascript:;" class="link">
                  Privacy Policy
                </a>
              </li>
              <li>
                <a href="javascript:;" class="link">
                  Terms & Services
                </a>
              </li>
              <li>
                <a href="javascript:;" class="link">
                  Payments
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="foot_group">
        <div class="foot_social">
          <a href="https://www.facebook.com/" target="_blank" class="sacial_link">
            <i class="ri-facebook-line"></i>
          </a>
          <a href="https://www.instagram.com/" target="_blank" class="sacial_link">
            <i class="ri-instagram-line"></i>
          </a>
          <a href="https://twitter.com/" target="_blank" class="sacial_link">
            <i class="ri-twitter-line"></i>
          </a>
          <a href="https://www.youtube.com/" target="_blank" class="sacial_link">
            <i class="ri-youtube-line"></i>
          </a>
        </div>

        <span class="foot_copy">
          &#169; Copyright vnyoon. All rights reserved
        </span>
      </div>
    </div>
  </footer>

  <!-- Scroll UP -->
  <a 
    href="#home"
    class="scroll-up"
    id="scroll-up"
  >
    <i class="ri-arrow-up-line"></i>
  </a>

  <script src="./assets/js/scrollreveal.min.js"></script>
  <script src="./assets/js/main.js"></script>
</body>
</html>